<template>
  <div id="app">
    {{ message }}
    <div>{{bool}}</div>
    <div v-html="htmlStr"></div>
    <div>
      <input type="text" v-model="count" >
      <div>{{count}}</div>
    </div>
    <div>
      <div v-if="color ==='红色'">红色</div>
      <div v-if="color ==='蓝色'">蓝色</div>
      <div v-else-if="color"  >粉色</div>
      <div v-else>黑色</div>
    </div>
    <div>
      <a v-bind:href="url">搜索一下</a>
    </div>
    <div style="width: 100px; height: 100px; background-color: blue " v-on:click="clickDiv" id="div">
    </div>
  </div>


</template>

<script>
// @ is an alias to /src


export default {
  name: 'HomeView',
  data() {
    return {
      message: '伊伊最可爱了~',
      num: 1,
      bool: false,
      htmlStr: '<strong id="htmlId" style="color: deepskyblue">伊伊在听课</strong>',
      count: 0,
      color: '粉色',
      url: 'https://www.baidu.com',
    }
  },
    methods: {
      clickDiv() {
        console.log('我点击了一个div')
        let color = document.getElementById('div').style.backgroundColor
        document.getElementById('div').style.backgroundColor = color === 'blue' ? 'pink' : 'blue'
        document.getElementById('htmlId').style.color = 'pink';

      }
    }
}
</script>

